import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_test_1/colors.dart';
import 'package:flutter_test_1/ex_widget.dart';

class SnapScrollPage extends StatefulWidget {
  @override
  _SnapScrollPageState createState() => _SnapScrollPageState();
}

class _SnapScrollPageState extends State<SnapScrollPage> {
  ScrollController _scrollController = ScrollController();
  double itemWidth = 200.0;
  int itemCount = 20;

  final double itemHeight = 50;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scrollable Container Example'),
      ),
      body: Stack(
        children: [
          Column(
            children: [
              Container(
                height: itemHeight * 2,
                width: double.infinity,
                color: AppColors.testColor1,
              ),
              Container(
                height: itemHeight,
                width: double.infinity,
                color: AppColors.testColor2,
              ),
              Container(
                height: itemHeight * 2,
                width: double.infinity,
                color: AppColors.testColor1,
              ),
            ],
          ),
          Container(
            height: itemHeight * 5,
            child: Center(
              child: NotificationListener<ScrollNotification>(
                onNotification: (notification) {
                  if (notification is ScrollStartNotification) {
                    print("now scroll start ");
                  } else if (notification is ScrollUpdateNotification) {
                    //when dragDetails is null, the finger is out off screen
                    print("now scroll is update dragDetails?.delta.dy ==  ${notification.dragDetails?.delta.dy}");
                    print("now scroll is update notification.scrollDelta == ${notification.scrollDelta}");
                  } else if (notification is ScrollEndNotification) {
                    print("now scroll is end");
                  }
                  return true;
                },
                child: ListView.builder(
                  padding: EdgeInsets.symmetric(vertical: itemHeight * 2),
                  controller: _scrollController,
                  itemCount: itemCount,
                  itemBuilder: (context, index) {
                    return Container(
                      width: 100.0,
                      height: itemHeight, // 设置每个项的宽度
                      margin: EdgeInsets.symmetric(horizontal: 40.0),
                      color: Colors.blue,
                      child: Center(
                        child: Text(
                          'Item $index',
                          style: TextStyle(fontSize: 16.0, color: Colors.white),
                        ),
                      ).onTap(() {
                        print("item have clicked $index");
                      }),
                    );
                  },
                ),
              ),
            ),
          ),
          TextButton(
            onPressed: () {
              //   _scrollController.jumpTo(itemHeight);
              _scrollController.animateTo(itemHeight, duration: Duration(milliseconds: 200), curve: Curves.decelerate);
            },
            child: Container(
              margin: EdgeInsets.only(top: itemHeight * 6),
              color: AppColors.black,
              padding: EdgeInsets.all(10),
              child: const Text(
                "a button",
                style: TextStyle(
                  color: Colors.amber,
                  fontSize: 20,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void initState() {
    super.initState();

    // 添加监听器，监听滚动停止事件
    // _scrollController.addListener(() {
    //   // 计算当前可见的第一个和最后一个项的索引
    //   int firstVisibleIndex = (_scrollController.offset / itemHeight).floor();
    //   int lastVisibleIndex = ((itemCount - 1) * _scrollController.position.viewportDimension / itemWidth).ceil();

    //   // 计算当前位置应该对齐到的目标位置
    //   double targetOffset = firstVisibleIndex * itemHeight;
    //   double middleOffset = targetOffset - (_scrollController.position.viewportDimension - itemHeight) / 2;

    //   // 将滚动位置动画到目标位置
    //   _scrollController.animateTo(
    //     middleOffset,
    //     duration: Duration(milliseconds: 500),
    //     curve: Curves.easeInOut,
    //   );
    // });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}
